<html lang="zh-CN">
 <head>
  <meta charset="utf-8"/>
  <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
  <title>
   AI问答小程序后台管理系统
  </title>
  <script src="https://res.gemcoder.com/js/reload.js">
  </script>
  <script src="https://cdn.tailwindcss.com">
  </script>
  <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"/>
  <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.3/echarts.min.js">
  </script>
  <!-- Tailwind配置 -->
  <script>
   tailwind.config = {
  theme: {
    extend: {
      colors: {
        primary: '#4F46E5',
        // 主色调：靛蓝色，代表智能和信任
        secondary: '#10B981',
        // 辅助色：绿色，代表成功和增长
        accent: '#F59E0B',
        // 强调色：橙色，用于重要按钮和提示
        danger: '#EF4444',
        // 危险色：红色，用于错误和删除操作
        dark: '#1E293B',
        // 深色：用于文本和背景
        light: '#F8FAFC',
        // 浅色：用于背景和卡片
        muted: '#94A3B8' // 中性色：用于次要文本
      },
      fontFamily: {
        sans: ['Inter', 'system-ui', 'sans-serif']
      },
      boxShadow: {
        'card': '0 4px 20px rgba(0, 0, 0, 0.08)',
        'hover': '0 10px 30px rgba(0, 0, 0, 0.12)'
      }
    }
  }
};
  </script>
  <style type="text/tailwindcss">
   @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .sidebar-item {
                @apply flex items-center gap-3 px-4 py-3 rounded-lg transition-all duration-200 cursor-pointer;
            }
.sidebar-item.active {
                @apply bg-blue-100 text-blue-600 font-medium;
            }
            .sidebar-item:hover:not(.active) {
                @apply bg-gray-100;
            }
            .card {
                @apply bg-white rounded-xl shadow-card p-5 transition-all duration-300 hover:shadow-hover;
            }
            .stat-card {
                @apply card flex flex-col gap-2;
            }
            .btn {
                @apply px-4 py-2 rounded-lg font-medium transition-all duration-200 flex items-center gap-2;
            }
            .btn-primary {
                @apply bg-primary text-white hover:bg-primary/90;
            }
            .btn-secondary {
                @apply bg-secondary text-white hover:bg-secondary/90;
            }
            .btn-accent {
                @apply bg-accent text-white hover:bg-accent/90;
            }
            .btn-outline {
                @apply border border-gray-300 hover:bg-gray-50;
            }
            .input-field {
                @apply w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary;
            }
            .badge {
                @apply px-2 py-1 rounded-full text-xs font-medium;
            }
        }
  </style>
 </head>
 <body class="bg-gray-50 font-sans text-dark">
  <div class="flex h-screen overflow-hidden">
   <!-- 侧边栏 -->
   <aside class="w-64 bg-white shadow-lg z-10 transition-all duration-300 ease-in-out" id="sidebar">
    <div class="flex items-center justify-between p-5 border-b">
     <div class="flex items-center gap-3">
      <div class="w-10 h-10 rounded-lg bg-primary flex items-center justify-center text-white" style="background-color:#4a90e2ff;">
       <i class="fas fa-robot text-xl">
       </i>
      </div>
      <h1 class="text-xl font-bold">
       AI问答管理系统
      </h1>
     </div>
     <button class="lg:hidden text-gray-500 hover:text-primary" id="toggleSidebar">
     </button>
    </div>
    <nav class="flex-1 overflow-y-auto scrollbar-hide p-4" data-selectorname="#id-9p583">
     <div class="mb-6" data-ytextravalue="extra-f2x2imfzf">
      <p class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3 px-4" data-ytindex="0" data-ytoriginindex="0">
       主导航
      </p>
      <a class="sidebar-item active" data-ytindex="1" data-ytoriginindex="1" data-ytparentvalue="extra-f2x2imfzf" href="javascript:void(0);">
       <i class="fas fa-tachometer-alt w-5 text-center">
       </i>
       <span>
        仪表盘
       </span>
      </a>
      <a class="sidebar-item" custom-href="w=1082&h=783&appuuid=1952902412440174592&version=2&pageType=web&uuid=1952917055879512064&appName=后台通用管理" data-ytindex="2" data-ytoriginindex="2" href="javascript:void(0);" is-add="false" is-page="true" onclick="ytCustomLinkNavigation()" target="_top">
       <i class="fas fa-file-alt w-5 text-center">
       </i>
       <span>
        文档管理
       </span>
      </a>
      <a class="sidebar-item" custom-href="w=1082&h=783&appuuid=1952902412440174592&version=1&pageType=web&uuid=1952919029114994688&appName=后台通用管理" data-ytindex="3" data-ytoriginindex="3" href="javascript:void(0);" is-add="false" is-page="true" onclick="ytCustomLinkNavigation()" target="_top">
       <i class="fas fa-history w-5 text-center">
       </i>
       <span>
        历史对话
       </span>
      </a>
      <a class="sidebar-item" data-ytindex="4" data-ytoriginindex="4" href="javascript:void(0);">
       <i class="fas fa-users w-5 text-center">
       </i>
       <span>
        用户管理
       </span>
      </a>
      <a class="sidebar-item" data-ytindex="5" data-ytoriginindex="5" href="javascript:void(0);">
       <i class="fas fa-lock w-5 text-center">
       </i>
       <span>
        权限管理
       </span>
      </a>
     </div>
     <div class="mb-6">
      <p class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3 px-4">
       系统
      </p>
      <a class="sidebar-item" href="javascript:void(0);">
       <i class="fas fa-cog w-5 text-center">
       </i>
       <span>
        系统设置
       </span>
      </a>
      <a class="sidebar-item" href="javascript:void(0);">
       <i class="fas fa-question-circle w-5 text-center">
       </i>
       <span>
        帮助中心
       </span>
      </a>
     </div>
     <div class="mt-8 p-4 bg-blue-50 rounded-xl">
      <div class="flex items-center gap-3 mb-3">
       <i class="fas fa-lightbulb text-blue-600 text-xl">
       </i>
       <h3 class="font-medium">
        AI能力配置
       </h3>
      </div>
      <p class="text-sm text-gray-600 mb-4">
       调整AI模型参数和RAG配置以优化问答效果
      </p>
      <a class="btn bg-blue-600 hover:bg-blue-700 text-white w-full justify-center" href="javascript:void(0);">
       <i class="fas fa-sliders-h">
       </i>
       <span>
        配置模型
       </span>
      </a>
     </div>
    </nav>
   </aside>
   <!-- 主内容区 -->
   <div class="flex-1 flex flex-col overflow-hidden">
    <!-- 顶部导航 -->
    <header class="h-16 bg-white shadow-sm flex items-center justify-between px-6 z-10">
     <div class="flex items-center gap-4">
      <button class="lg:hidden text-gray-500 hover:text-primary" id="mobileSidebarToggle">
      </button>
      <div class="relative hidden md:block">
      </div>
     </div>
     <div class="flex items-center gap-6">
      <button class="relative text-gray-500 hover:text-primary transition-colors">
       <i class="fas fa-bell text-xl">
       </i>
       <span class="absolute -top-1 -right-1 w-4 h-4 bg-danger rounded-full text-white text-xs flex items-center justify-center">
        3
       </span>
      </button>
      <button class="relative text-gray-500 hover:text-primary transition-colors">
       <i class="fas fa-envelope text-xl">
       </i>
       <span class="absolute -top-1 -right-1 w-4 h-4 bg-primary rounded-full text-white text-xs flex items-center justify-center">
        5
       </span>
      </button>
      <div class="flex items-center gap-3 cursor-pointer group">
       <img alt="用户头像" class="w-10 h-10 rounded-full object-cover border-2 border-transparent group-hover:border-primary transition-all" src="https://design.gemcoder.com/staticResource/echoAiSystemImages/d5b746e6df920d562920498d632da9fe.png"/>
       <div class="hidden md:block">
        <p class="font-medium">
         管理员
        </p>
        <p class="text-xs text-gray-500">
         系统管理员
        </p>
       </div>
       <i class="fas fa-chevron-down text-xs text-gray-500 group-hover:text-primary transition-colors">
       </i>
      </div>
     </div>
    </header>
    <!-- 页面内容 -->
    <main class="flex-1 overflow-y-auto p-6 bg-gray-50">
     <div class="max-w-7xl mx-auto">
      <!-- 页面标题 -->
      <div class="mb-8">
       <h1 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold">
        数据中心
       </h1>
       <p class="text-gray-500 mt-1">
        实时监控系统运行状态和关键业务指标
       </p>
      </div>
      <!-- 快捷操作 -->
      <div class="flex flex-wrap gap-4 mb-8">
       <a class="btn btn-primary" href="javascript:void(0);">
        <i class="fas fa-upload">
        </i>
        <span>
         上传文档
        </span>
       </a>
       <a class="btn btn-secondary" href="javascript:void(0);">
        <i class="fas fa-file-import">
        </i>
        <span>
         批量导入
        </span>
       </a>
       <a class="btn btn-outline" href="javascript:void(0);">
        <i class="fas fa-sync-alt">
        </i>
        <span>
         刷新数据
        </span>
       </a>
       <a class="btn btn-outline ml-auto" href="javascript:void(0);">
        <i class="fas fa-download">
        </i>
        <span>
         导出报表
        </span>
       </a>
       <div class="relative">
        <select class="input-field pr-8 appearance-none bg-white">
         <option>
          今日数据
         </option>
         <option>
          昨日数据
         </option>
         <option>
          本周数据
         </option>
         <option>
          本月数据
         </option>
         <option>
          自定义...
         </option>
        </select>
        <i class="fas fa-chevron-down absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 pointer-events-none">
        </i>
       </div>
      </div>
      <!-- 关键指标卡片 -->
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
       <!-- 总问答次数 -->
       <div class="stat-card border-l-4 border-primary">
        <div class="flex items-center justify-between">
         <h3 class="text-gray-500 font-medium">
          总问答次数
         </h3>
         <span class="badge bg-primary/10 text-primary">
          <i class="fas fa-arrow-up">
          </i>
          12.5%
         </span>
        </div>
        <p class="text-3xl font-bold mt-1">
         128,453
        </p>
        <div class="flex items-center text-sm text-gray-500 mt-2">
         <i class="fas fa-clock-o mr-1">
         </i>
         <span>
          较上月增长 12,453 次
         </span>
        </div>
       </div>
       <!-- 文档总数 -->
       <div class="stat-card border-l-4 border-secondary">
        <div class="flex items-center justify-between">
         <h3 class="text-gray-500 font-medium">
          文档总数
         </h3>
         <span class="badge bg-secondary/10 text-secondary">
          <i class="fas fa-arrow-up">
          </i>
          8.2%
         </span>
        </div>
        <p class="text-3xl font-bold mt-1">
         3,842
        </p>
        <div class="flex items-center text-sm text-gray-500 mt-2">
         <i class="fas fa-file-alt mr-1">
         </i>
         <span>
          本月新增 287 份文档
         </span>
        </div>
       </div>
       <!-- 活跃用户数 -->
       <div class="stat-card border-l-4 border-accent">
        <div class="flex items-center justify-between">
         <h3 class="text-gray-500 font-medium">
          活跃用户数
         </h3>
         <span class="badge bg-accent/10 text-accent">
          <i class="fas fa-arrow-up">
          </i>
          5.7%
         </span>
        </div>
        <p class="text-3xl font-bold mt-1">
         15,287
        </p>
        <div class="flex items-center text-sm text-gray-500 mt-2">
         <i class="fas fa-users mr-1">
         </i>
         <span>
          较上周新增 823 位用户
         </span>
        </div>
       </div>
       <!-- 平均回答可信度 -->
       <div class="stat-card border-l-4 border-purple-500">
        <div class="flex items-center justify-between">
         <h3 class="text-gray-500 font-medium">
          平均回答可信度
         </h3>
         <span class="badge bg-purple-100 text-purple-600">
          <i class="fas fa-arrow-up">
          </i>
          3.2%
         </span>
        </div>
        <p class="text-3xl font-bold mt-1">
         87.3
         <span class="text-lg">
          %
         </span>
        </p>
        <div class="flex items-center text-sm text-gray-500 mt-2">
         <i class="fas fa-check-circle mr-1">
         </i>
         <span>
          较上月提升 2.8 个百分点
         </span>
        </div>
       </div>
      </div>
      <!-- 图表区域 -->
      <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
       <!-- 问答趋势图表 -->
       <div class="card lg:col-span-2">
        <div class="flex items-center justify-between mb-6">
         <h2 class="text-lg font-semibold">
          问答趋势分析
         </h2>
         <div class="flex gap-2">
          <button class="btn btn-outline text-sm px-3 py-1">
           日
          </button>
          <button class="btn btn-primary text-sm px-3 py-1">
           周
          </button>
          <button class="btn btn-outline text-sm px-3 py-1">
           月
          </button>
          <button class="btn btn-outline text-sm px-3 py-1">
           年
          </button>
         </div>
        </div>
        <div class="h-80">
         <canvas id="trendsChart">
         </canvas>
        </div>
       </div>
       <!-- 回答可信度分布 -->
       <div class="card">
        <div class="flex items-center justify-between mb-6">
         <h2 class="text-lg font-semibold">
          回答可信度分布
         </h2>
         <button class="text-gray-400 hover:text-primary">
          <i class="fas fa-ellipsis-v">
          </i>
         </button>
        </div>
        <div class="h-80">
         <canvas id="confidenceChart">
         </canvas>
        </div>
        <div class="grid grid-cols-2 gap-4 mt-4">
         <div class="flex items-center gap-3">
          <div class="w-3 h-3 rounded-full bg-green-500">
          </div>
          <span class="text-sm">
           高可信度 (80-100%)
          </span>
         </div>
         <div class="flex items-center gap-3">
          <div class="w-3 h-3 rounded-full bg-yellow-500">
          </div>
          <span class="text-sm">
           中等可信度 (50-79%)
          </span>
         </div>
         <div class="flex items-center gap-3">
          <div class="w-3 h-3 rounded-full bg-orange-500">
          </div>
          <span class="text-sm">
           低可信度 (30-49%)
          </span>
         </div>
         <div class="flex items-center gap-3">
          <div class="w-3 h-3 rounded-full bg-red-500">
          </div>
          <span class="text-sm">
           不可信 (
<30%)
          </span>
         </div>
        </div>
       </div>
      </div>
      <!-- 文档处理状态和热门问题 -->
      <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
       <!-- 文档处理状态 -->
       <div class="card lg:col-span-1">
        <div class="flex items-center justify-between mb-6">
         <h2 class="text-lg font-semibold">
          文档处理状态
         </h2>
         <a class="text-primary text-sm hover:underline" href="javascript:void(0);">
          查看全部
         </a>
        </div>
        <div class="space-y-4">
         <!-- 处理中 -->
         <div>
          <div class="flex items-center justify-between mb-2">
           <div class="flex items-center gap-2">
            <i class="fas fa-spinner fa-spin text-yellow-500">
            </i>
            <span class="font-medium">
             处理中
            </span>
           </div>
           <span class="text-sm font-medium">
            12 个文档
           </span>
          </div>
          <div class="w-full bg-gray-200 rounded-full h-2">
           <div class="bg-yellow-500 h-2 rounded-full" style="width: 65%">
           </div>
          </div>
         </div>
         <!-- 已完成 -->
         <div>
          <div class="flex items-center justify-between mb-2">
           <div class="flex items-center gap-2">
            <i class="fas fa-check-circle text-green-500">
            </i>
            <span class="font-medium">
             已完成
            </span>
           </div>
           <span class="text-sm font-medium">
            248 个文档
           </span>
          </div>
          <div class="w-full bg-gray-200 rounded-full h-2">
           <div class="bg-green-500 h-2 rounded-full" style="width: 85%">
           </div>
          </div>
         </div>
         <!-- 待处理 -->
         <div>
          <div class="flex items-center justify-between mb-2">
           <div class="flex items-center gap-2">
            <i class="fas fa-clock-o text-blue-500">
            </i>
            <span class="font-medium">
             待处理
            </span>
           </div>
           <span class="text-sm font-medium">
            8 个文档
           </span>
          </div>
          <div class="w-full bg-gray-200 rounded-full h-2">
           <div class="bg-blue-500 h-2 rounded-full" style="width: 15%">
           </div>
          </div>
         </div>
         <!-- 处理失败 -->
         <div>
          <div class="flex items-center justify-between mb-2">
           <div class="flex items-center gap-2">
            <i class="fas fa-exclamation-circle text-red-500">
            </i>
            <span class="font-medium">
             处理失败
            </span>
           </div>
           <span class="text-sm font-medium">
            3 个文档
           </span>
          </div>
          <div class="w-full bg-gray-200 rounded-full h-2">
           <div class="bg-red-500 h-2 rounded-full" style="width: 5%">
           </div>
          </div>
         </div>
        </div>
        <div class="mt-6 pt-4 border-t border-gray-100">
         <h3 class="font-medium mb-3">
          最近处理文档
         </h3>
         <div class="space-y-3">
          <div class="flex items-center justify-between">
           <div class="flex items-center gap-3">
            <i class="fas fa-file-pdf text-red-500">
            </i>
            <div>
             <p class="text-sm font-medium truncate max-w-[180px]">
              产品规格说明书.pdf
             </p>
             <p class="text-xs text-gray-500">
              2分钟前 完成处理
             </p>
            </div>
           </div>
           <span class="badge bg-green-100 text-green-700">
            成功
           </span>
          </div>
          <div class="flex items-center justify-between">
           <div class="flex items-center gap-3">
            <i class="fas fa-file-word text-blue-500">
            </i>
            <div>
             <p class="text-sm font-medium truncate max-w-[180px]">
              技术白皮书.docx
             </p>
             <p class="text-xs text-gray-500">
              15分钟前 完成处理
             </p>
            </div>
           </div>
           <span class="badge bg-green-100 text-green-700">
            成功
           </span>
          </div>
          <div class="flex items-center justify-between">
           <div class="flex items-center gap-3">
            <i class="fas fa-file-excel text-green-500">
            </i>
            <div>
             <p class="text-sm font-medium truncate max-w-[180px]">
              数据分析报告.xlsx
             </p>
             <p class="text-xs text-gray-500">
              42分钟前 处理中
             </p>
            </div>
           </div>
           <span class="badge bg-yellow-100 text-yellow-700">
            处理中
           </span>
          </div>
         </div>
        </div>
       </div>
       <!-- 热门问题TOP5 -->
       <div class="card lg:col-span-2">
        <div class="flex items-center justify-between mb-6">
         <h2 class="text-lg font-semibold">
          热门问题TOP5
         </h2>
         <div class="flex gap-2">
          <select class="input-field text-sm py-1 h-8">
           <option>
            今日
           </option>
           <option>
            本周
           </option>
           <option selected="">
            本月
           </option>
          </select>
         </div>
        </div>
        <div class="space-y-4">
         <!-- 问题1 -->
         <div class="p-4 border border-gray-100 rounded-lg hover:border-primary/30 transition-colors">
          <div class="flex items-start gap-3">
           <div class="bg-primary/10 text-primary rounded-full w-8 h-8 flex items-center justify-center flex-shrink-0 mt-0.5">
            <span class="font-bold">
             1
            </span>
           </div>
           <div class="flex-1">
            <h3 class="font-medium mb-1">
             如何配置RAG模型参数以提高问答准确性？
            </h3>
            <p class="text-sm text-gray-600 mb-3 line-clamp-2">
             这是用户最常问的问题，主要涉及到向量数据库配置、相似度阈值调整和上下文窗口大小设置等方面。
            </p>
            <div class="flex flex-wrap items-center gap-2 text-xs">
             <span class="badge bg-gray-100 text-gray-700">
              <i class="fas fa-eye mr-1">
              </i>
              1,243次查看
             </span>
             <span class="badge bg-blue-100 text-blue-700">
              <i class="fas fa-check-circle mr-1">
              </i>
              92%满意度
             </span>
             <span class="badge bg-purple-100 text-purple-700">
              <i class="fas fa-file-alt mr-1">
              </i>
              引用3篇文档
             </span>
             <a class="text-primary hover:underline ml-auto" href="javascript:void(0);">
              查看详情
             </a>
            </div>
           </div>
          </div>
         </div>
         <!-- 问题2 -->
         <div class="p-4 border border-gray-100 rounded-lg hover:border-primary/30 transition-colors">
          <div class="flex items-start gap-3">
           <div class="bg-gray-100 text-gray-700 rounded-full w-8 h-8 flex items-center justify-center flex-shrink-0 mt-0.5">
            <span class="font-bold">
             2
            </span>
           </div>
           <div class="flex-1">
            <h3 class="font-medium mb-1">
             文档上传后需要多长时间才能被AI索引？
            </h3>
            <p class="text-sm text-gray-600 mb-3 line-clamp-2">
             用户关心文档处理速度，特别是大型PDF和批量上传时的处理时间预期。
            </p>
            <div class="flex flex-wrap items-center gap-2 text-xs">
             <span class="badge bg-gray-100 text-gray-700">
              <i class="fas fa-eye mr-1">
              </i>
              987次查看
             </span>
             <span class="badge bg-blue-100 text-blue-700">
              <i class="fas fa-check-circle mr-1">
              </i>
              88%满意度
             </span>
             <span class="badge bg-purple-100 text-purple-700">
              <i class="fas fa-file-alt mr-1">
              </i>
              引用2篇文档
             </span>
             <a class="text-primary hover:underline ml-auto" href="javascript:void(0);">
              查看详情
             </a>
            </div>
           </div>
          </div>
         </div>
         <!-- 问题3 -->
         <div class="p-4 border border-gray-100 rounded-lg hover:border-primary/30 transition-colors">
          <div class="flex items-start gap-3">
           <div class="bg-gray-100 text-gray-700 rounded-full w-8 h-8 flex items-center justify-center flex-shrink-0 mt-0.5">
            <span class="font-bold">
             3
            </span>
           </div>
           <div class="flex-1">
            <h3 class="font-medium mb-1">
             如何设置文档的访问权限和可见范围？
            </h3>
            <p class="text-sm text-gray-600 mb-3 line-clamp-2">
             管理员需要控制哪些文档对内公开，哪些对外公开，以及特定用户组的访问权限设置。
            </p>
            <div class="flex flex-wrap items-center gap-2 text-xs">
             <span class="badge bg-gray-100 text-gray-700">
              <i class="fas fa-eye mr-1">
              </i>
              756次查看
             </span>
             <span class="badge bg-blue-100 text-blue-700">
              <i class="fas fa-check-circle mr-1">
              </i>
              94%满意度
             </span>
             <span class="badge bg-purple-100 text-purple-700">
              <i class="fas fa-file-alt mr-1">
              </i>
              引用1篇文档
             </span>
             <a class="text-primary hover:underline ml-auto" href="javascript:void(0);">
              查看详情
             </a>
            </div>
           </div>
          </div>
         </div>
        </div>
       </div>
      </div>
      <!-- 最近对话和系统状态 -->
      <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
       <!-- 最近对话记录 -->
       <div class="card lg:col-span-2">
        <div class="flex items-center justify-between mb-6">
         <h2 class="text-lg font-semibold">
          最近对话记录
         </h2>
         <a class="text-primary text-sm hover:underline" href="javascript:void(0);">
          查看全部
         </a>
        </div>
        <div class="overflow-x-auto">
         <table class="min-w-full">
          <thead>
           <tr class="border-b border-gray-200">
            <th class="text-left py-3 px-4 font-semibold text-sm text-gray-600">
             用户
            </th>
            <th class="text-left py-3 px-4 font-semibold text-sm text-gray-600">
             问题摘要
            </th>
            <th class="text-left py-3 px-4 font-semibold text-sm text-gray-600">
             可信度
            </th>
            <th class="text-left py-3 px-4 font-semibold text-sm text-gray-600">
             时间
            </th>
            <th class="text-left py-3 px-4 font-semibold text-sm text-gray-600">
             操作
            </th>
           </tr>
          </thead>
          <tbody>
           <tr class="border-b border-gray-100 hover:bg-gray-50 transition-colors">
            <td class="py-4 px-4">
             <div class="flex items-center gap-3">
              <img alt="用户头像" class="w-8 h-8 rounded-full object-cover" src="https://design.gemcoder.com/staticResource/echoAiSystemImages/fb833cd825d4c675a5aabe425596d975.png"/>
              <div>
               <p class="font-medium text-sm">
                张三
               </p>
               <p class="text-xs text-gray-500">
                普通用户
               </p>
              </div>
             </div>
            </td>
            <td class="py-4 px-4">
             <p class="text-sm line-clamp-1">
              如何优化RAG系统的检索准确性？
             </p>
            </td>
            <td class="py-4 px-4">
             <span class="badge bg-green-100 text-green-700">
              92%
             </span>
            </td>
            <td class="py-4 px-4 text-sm text-gray-500">
             今天 09:42
            </td>
            <td class="py-4 px-4">
             <div class="flex gap-2">
              <button class="text-primary hover:text-primary/80" title="查看详情">
               <i class="fas fa-eye">
               </i>
              </button>
              <button class="text-gray-500 hover:text-gray-700" title="重新生成回答">
               <i class="fas fa-sync-alt">
               </i>
              </button>
              <button class="text-gray-500 hover:text-gray-700" title="导出对话">
               <i class="fas fa-download">
               </i>
              </button>
             </div>
            </td>
           </tr>
           <tr class="border-b border-gray-100 hover:bg-gray-50 transition-colors">
            <td class="py-4 px-4">
             <div class="flex items-center gap-3">
              <img alt="用户头像" class="w-8 h-8 rounded-full object-cover" src="https://design.gemcoder.com/staticResource/echoAiSystemImages/e00e45707f9481bee4ab84469fe352c9.png"/>
              <div>
               <p class="font-medium text-sm">
                李四
               </p>
               <p class="text-xs text-gray-500">
                VIP用户
               </p>
              </div>
             </div>
            </td>
            <td class="py-4 px-4">
             <p class="text-sm line-clamp-1">
              文档上传后为什么在问答中没有被引用？
             </p>
            </td>
            <td class="py-4 px-4">
             <span class="badge bg-yellow-100 text-yellow-700">
              68%
             </span>
            </td>
            <td class="py-4 px-4 text-sm text-gray-500">
             今天 08:15
            </td>
            <td class="py-4 px-4">
             <div class="flex gap-2">
              <button class="text-primary hover:text-primary/80" title="查看详情">
               <i class="fas fa-eye">
               </i>
              </button>
              <button class="text-gray-500 hover:text-gray-700" title="重新生成回答">
               <i class="fas fa-sync-alt">
               </i>
              </button>
              <button class="text-gray-500 hover:text-gray-700" title="导出对话">
               <i class="fas fa-download">
               </i>
              </button>
             </div>
            </td>
           </tr>
           <tr class="border-b border-gray-100 hover:bg-gray-50 transition-colors">
            <td class="py-4 px-4">
             <div class="flex items-center gap-3">
              <img alt="用户头像" class="w-8 h-8 rounded-full object-cover" src="https://design.gemcoder.com/staticResource/echoAiSystemImages/be6703ef9b6e5c4b54a02ae8afe01d4e.png"/>
              <div>
               <p class="font-medium text-sm">
                王五
               </p>
               <p class="text-xs text-gray-500">
                管理员
               </p>
              </div>
             </div>
            </td>
            <td class="py-4 px-4">
             <p class="text-sm line-clamp-1">
              如何批量导入多个文档并设置统一权限？
             </p>
            </td>
            <td class="py-4 px-4">
             <span class="badge bg-green-100 text-green-700">
              96%
             </span>
            </td>
            <td class="py-4 px-4 text-sm text-gray-500">
             昨天 16:32
            </td>
            <td class="py-4 px-4">
             <div class="flex gap-2">
              <button class="text-primary hover:text-primary/80" title="查看详情">
               <i class="fas fa-eye">
               </i>
              </button>
              <button class="text-gray-500 hover:text-gray-700" title="重新生成回答">
               <i class="fas fa-sync-alt">
               </i>
              </button>
              <button class="text-gray-500 hover:text-gray-700" title="导出对话">
               <i class="fas fa-download">
               </i>
              </button>
             </div>
            </td>
           </tr>
           <tr class="border-b border-gray-100 hover:bg-gray-50 transition-colors">
            <td class="py-4 px-4">
             <div class="flex items-center gap-3">
              <img alt="用户头像" class="w-8 h-8 rounded-full object-cover" src="https://design.gemcoder.com/staticResource/echoAiSystemImages/36f3939f42be2e38713544be9e8009af.png"/>
              <div>
               <p class="font-medium text-sm">
                赵六
               </p>
               <p class="text-xs text-gray-500">
                普通用户
               </p>
              </div>
             </div>
            </td>
            <td class="py-4 px-4">
             <p class="text-sm line-clamp-1">
              多端同步功能如何确保数据安全？
             </p>
            </td>
            <td class="py-4 px-4">
             <span class="badge bg-orange-100 text-orange-700">
              45%
             </span>
            </td>
            <td class="py-4 px-4 text-sm text-gray-500">
             昨天 14:20
            </td>
            <td class="py-4 px-4">
             <div class="flex gap-2">
              <button class="text-primary hover:text-primary/80" title="查看详情">
               <i class="fas fa-eye">
               </i>
              </button>
              <button class="text-gray-500 hover:text-gray-700" title="重新生成回答">
               <i class="fas fa-sync-alt">
               </i>
              </button>
              <button class="text-gray-500 hover:text-gray-700" title="导出对话">
               <i class="fas fa-download">
               </i>
              </button>
             </div>
            </td>
           </tr>
          </tbody>
         </table>
        </div>
       </div>
       <!-- 系统状态 -->
       <div class="card">
        <div class="flex items-center justify-between mb-6">
         <h2 class="text-lg font-semibold">
          系统状态监控
         </h2>
         <span class="badge bg-green-100 text-green-700 flex items-center gap-1">
          <span class="w-2 h-2 bg-green-500 rounded-full animate-pulse">
          </span>
          全部正常
         </span>
        </div>
        <div class="space-y-5">
         <!-- API服务 -->
         <div>
          <div class="flex items-center justify-between mb-2">
           <div class="flex items-center gap-2">
            <i class="fas fa-server text-blue-500">
            </i>
            <span class="font-medium">
             API服务
            </span>
           </div>
           <span class="text-sm font-medium">
            99.8% 正常率
           </span>
          </div>
          <div class="flex items-center justify-between text-sm text-gray-600 mb-1">
           <span>
            响应时间
           </span>
           <span class="text-green-600">
            42ms
           </span>
          </div>
          <div class="w-full bg-gray-200 rounded-full h-2">
           <div class="bg-blue-500 h-2 rounded-full" style="width: 92%">
           </div>
          </div>
         </div>
         <!-- 向量数据库 -->
         <div>
          <div class="flex items-center justify-between mb-2">
           <div class="flex items-center gap-2">
            <i class="fas fa-database text-purple-500">
            </i>
            <span class="font-medium">
             向量数据库
            </span>
           </div>
           <span class="text-sm font-medium">
            99.9% 正常率
           </span>
          </div>
          <div class="flex items-center justify-between text-sm text-gray-600 mb-1">
           <span>
            使用率
           </span>
           <span class="text-yellow-600">
            78%
           </span>
          </div>
          <div class="w-full bg-gray-200 rounded-full h-2">
           <div class="bg-purple-500 h-2 rounded-full" style="width: 78%">
           </div>
          </div>
         </div>
         <!-- 文档处理服务 -->
         <div>
          <div class="flex items-center justify-between mb-2">
           <div class="flex items-center gap-2">
            <i class="fas fa-file-process text-green-500">
            </i>
            <span class="font-medium">
             文档处理服务
            </span>
           </div>
           <span class="text-sm font-medium">
            98.5% 正常率
           </span>
          </div>
          <div class="flex items-center justify-between text-sm text-gray-600 mb-1">
           <span>
            队列长度
           </span>
           <span class="text-blue-600">
            12 个任务
           </span>
          </div>
          <div class="w-full bg-gray-200 rounded-full h-2">
           <div class="bg-green-500 h-2 rounded-full" style="width: 65%">
           </div>
          </div>
         </div>
         <!-- AI模型服务 -->
         <div>
          <div class="flex items-center justify-between mb-2">
           <div class="flex items-center gap-2">
            <i class="fas fa-brain text-yellow-500">
            </i>
            <span class="font-medium">
             AI模型服务
            </span>
           </div>
           <span class="text-sm font-medium">
            99.7% 正常率
           </span>
          </div>
          <div class="flex items-center justify-between text-sm text-gray-600 mb-1">
           <span>
            负载
           </span>
           <span class="text-green-600">
            45%
           </span>
          </div>
          <div class="w-full bg-gray-200 rounded-full h-2">
           <div class="bg-yellow-500 h-2 rounded-full" style="width: 45%">
           </div>
          </div>
         </div>
        </div>
        <div class="mt-6 pt-5 border-t border-gray-100">
         <h3 class="font-medium mb-4">
          系统资源使用
         </h3>
         <div class="grid grid-cols-2 gap-4">
          <div>
           <div class="flex items-center justify-between text-sm mb-1">
            <span class="text-gray-600">
             CPU使用率
            </span>
            <span class="font-medium">
             38%
            </span>
           </div>
           <div class="w-full bg-gray-200 rounded-full h-2">
            <div class="bg-blue-500 h-2 rounded-full" style="width: 38%">
            </div>
           </div>
          </div>
          <div>
           <div class="flex items-center justify-between text-sm mb-1">
            <span class="text-gray-600">
             内存使用率
            </span>
            <span class="font-medium">
             62%
            </span>
           </div>
           <div class="w-full bg-gray-200 rounded-full h-2">
            <div class="bg-yellow-500 h-2 rounded-full" style="width: 62%">
            </div>
           </div>
          </div>
          <div>
           <div class="flex items-center justify-between text-sm mb-1">
            <span class="text-gray-600">
             磁盘空间
            </span>
            <span class="font-medium">
             45%
            </span>
           </div>
           <div class="w-full bg-gray-200 rounded-full h-2">
            <div class="bg-green-500 h-2 rounded-full" style="width: 45%">
            </div>
           </div>
          </div>
          <div>
           <div class="flex items-center justify-between text-sm mb-1">
            <span class="text-gray-600">
             网络流量
            </span>
            <span class="font-medium">
             28%
            </span>
           </div>
           <div class="w-full bg-gray-200 rounded-full h-2">
            <div class="bg-purple-500 h-2 rounded-full" style="width: 28%">
            </div>
           </div>
          </div>
         </div>
        </div>
       </div>
      </div>
     </div>
    </main>
   </div>
  </div>
  <!-- JavaScript -->
  <script>
   // 页面加载时初始化
document.addEventListener('DOMContentLoaded', function () {
  // 侧边栏切换
  var sidebar = document.getElementById('sidebar');
  var toggleSidebar = document.getElementById('toggleSidebar');
  var mobileSidebarToggle = document.getElementById('mobileSidebarToggle');
  function toggleSidebarVisibility() {
    sidebar.classList.toggle('-translate-x-full');
  }
  if (toggleSidebar) toggleSidebar.addEventListener('click', toggleSidebarVisibility);
  if (mobileSidebarToggle) mobileSidebarToggle.addEventListener('click', toggleSidebarVisibility);

  // 初始化图表
  initCharts();
});

// 初始化ECharts图表
function initCharts() {
  // 问答趋势图表
  var trendsChart = echarts.init(document.getElementById('trendsChart'));
  var trendsOption = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      data: ['问答次数', '文档引用数'],
      top: 0
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      }
    },
    yAxis: [{
      type: 'value',
      name: '问答次数',
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      splitLine: {
        lineStyle: {
          color: '#f0f0f0'
        }
      }
    }, {
      type: 'value',
      name: '文档引用数',
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      splitLine: {
        show: false
      }
    }],
    series: [{
      name: '问答次数',
      type: 'bar',
      data: [18203, 23489, 29034, 10497, 13174, 63023, 16203],
      itemStyle: {
        color: '#4F46E5',
        borderRadius: [4, 4, 0, 0]
      },
      barWidth: '40%'
    }, {
      name: '文档引用数',
      type: 'line',
      yAxisIndex: 1,
      data: [3200, 3908, 5000, 2500, 3600, 12000, 4200],
      lineStyle: {
        color: '#10B981'
      },
      symbol: 'circle',
      symbolSize: 6,
      itemStyle: {
        color: '#10B981'
      }
    }]
  };
  trendsChart.setOption(trendsOption);

  // 回答可信度分布图表
  var confidenceChart = echarts.init(document.getElementById('confidenceChart'));
  var confidenceOption = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left',
      textStyle: {
        fontSize: 12
      }
    },
    series: [{
      name: '可信度分布',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 6,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 16,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [{
        value: 45,
        name: '高可信度 (80-100%)',
        itemStyle: {
          color: '#10B981'
        }
      }, {
        value: 25,
        name: '中等可信度 (50-79%)',
        itemStyle: {
          color: '#F59E0B'
        }
      }, {
        value: 15,
        name: '低可信度 (30-49%)',
        itemStyle: {
          color: '#F97316'
        }
      }, {
        value: 15,
        name: '不可信 (<30%)',
        itemStyle: {
          color: '#EF4444'
        }
      }]
    }]
  };
  confidenceChart.setOption(confidenceOption);

  // 响应窗口大小变化
  window.addEventListener('resize', function () {
    trendsChart.resize();
    confidenceChart.resize();
  });
}
  </script>
 </body>
</html>
